<template>
  <div class="app-container" style="width:100%;">
    <el-tree
      id="el-tree"
      ref="tree"
      :render-content="renderContent"
      class="filter-tree"
      :data="data2"
      node-key="id"
      :highlight-current="true"
      :props="defaultProps"
      :expand-on-click-node="false"
      @node-click="handleNodeClick"
    />
    <span slot="footer" class="dialog-footer">
      <div style="text-align:right;">
        <el-button type="primary" @click="onOK">确定</el-button>
        <el-button type="danger" @click="closePage">取消</el-button>
      </div>
    </span>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { copyFile, moveFile } from '@/api/publicFile'
import { copyCatalog, moveCatalog, getTreeList2 } from '@/api/publicCatalog'

export default {
  name: 'Zzjg',
  inject: ['getList'],
  props: { // 第二种方式
    proid: {
      type: String,
      required: true
    },
    operation: {
      type: Boolean,
      required: true
    },
    dataform: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      parentDialogId: '', // 移动或复制的父id
      departmentDialogId: '', // 移动或复制的部门id
      data: [],
      data2: [],
      dataDialog: {},
      img1: require('../../../assets/images/Folder-01.png'),
      defaultProps: {
        children: 'children',
        label: 'typeName'
      }
    }
  },
  created() {
    this.dataDialog = this.dataform
    this.getTreeList()
  },
  methods: {
    getTreeList() { // 加载列表
      this.data = []

      getTreeList2().then(response => {
        this.data = response.data

        this.data2 = this.buildTree2(this.data)
        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    buildTree2(data) {
      var rdata = []
      for (let i = 0; i < data.length; i++) {
        var e1 = data[i]
        if (e1.parentId === '1') {
          rdata.push(e1)
        }
        for (let j = 0; j < data.length; j++) {
          var e2 = data[j]
          if (e1.parentId === e2.id) {
            if (!e2.children) {
              e2.children = []
            }
            e2.children.push(e1)
          }
        }
      }
      return rdata
    },
    // 提示框
    renderContent: function(h, {
      node,
      data,
      store
    }) {
      var text = data.typeName
      if (text.length > 15) {
        return (
          < span >
            < i > <img src={this.img1} style='width: 18px;height: 18px;margin-right:5px;padding-top:1px' /></i>
            <el-tooltip class='item' id='tool' effect='light' popper-class='draw' visible-arrow='false' content={data.typeName} placement='bottom-start' >
              <span class='style-demo' >{data.typeName}</span >
            </el-tooltip>
          </span>)
      } else {
        return (
          < span >
            < i > <img src={this.img1} style='width: 18px;height: 18px;margin-right:5px;padding-top:1px' /></i>
            <span class='style-demo' >{data.typeName}</span >
          </span>)
      }
    },
    handleNodeClick(data) {
      this.parentDialogId = data.id
      this.departmentDialogId = data.departmentId
    },
    onOK() {
      if (this.parentDialogId !== '' && this.departmentDialogId !== '') {
        this.dataDialog.departmentId = this.departmentDialogId
        const loading = this.$loading({
          lock: true,
          text: '处理中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        if (this.proid === 'catalog') { // 文件夹--catalog
          this.dataDialog.parentId = this.parentDialogId
          if (this.operation) { // 复制
            copyCatalog(this.dataDialog).then(response => {
              Message({
                message: '复制成功',
                type: 'success',
                duration: 5 * 1000
              })
              loading.close()
              this.$emit('update:visible', false)
              this.getList()
            }).catch(response => {
              loading.close()
            })
          } else { // 移动
            moveCatalog(this.dataDialog).then(response => {
              Message({
                message: '移动成功',
                type: 'success',
                duration: 5 * 1000
              })
              loading.close()
              this.$emit('update:visible', false)
              this.getList()
            }).catch(response => {
              loading.close()
            })
          }
        } else {
          this.dataDialog.gftId = this.parentDialogId
          if (this.operation) { // 复制
            copyFile(this.dataDialog).then(response => {
              Message({
                message: '复制成功',
                type: 'success',
                duration: 5 * 1000
              })
              loading.close()
              this.$emit('update:visible', false)
              this.getList()
            }).catch(response => {
              loading.close()
            })
          } else { // 移动
            moveFile(this.dataDialog).then(response => {
              Message({
                message: '移动成功',
                type: 'success',
                duration: 5 * 1000
              })
              loading.close()
              this.$emit('update:visible', false)
              this.getList()
            }).catch(response => {
              loading.close()
            })
          }
        }
      } else {
        this.$message.error('您还未选择移动目录')
      }
    },
    closePage() {
      this.$emit('update:visible', false)
    }
  }
}
</script>
